<template>
  <view class="viewport">
    <fui-nav-bar isOccupy isFixed background="#0052D9" title="报修详情" color="#fff" @leftClick="leftClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="nav">
        <view class="top">
          <image class="img" src="../../static/logo.png" mode=""></image>
          <view class="nav_title">
            <view class="h1">电动机2022</view>
            <view class="h2">
              <span>设备编号：</span>
              <span class="colorGray">sb980357</span>
            </view>
            <view class="h2">
              <span>设备型号：</span>
              <span class="colorGray">30*2*20</span>
            </view>
            <view class="h2">
              <span>设备类型：</span>
              <span class="colorGray">电梯设备</span>
            </view>
          </view>
        </view>

        <view class="nav_bottom">
          <view class="nav_warp">
            <span>使用部门：</span>
            <span class="colorGray">生产部门</span>
          </view>
          <view class="nav_warp">
            <span>存放位置：</span>
            <span class="colorGray">新产品n256生产车间二层一车间</span>
          </view>
        </view>
      </view>
      <view class="">
        <fui-tabs @change="change" :tabs="tabs" isDot scroll alignLeft :short="false"></fui-tabs>
      </view>
      <view class="scroll-view">
        <faultMessage v-if="checkIndex === 0"></faultMessage>
        <auditCheck v-else-if="checkIndex === 1"></auditCheck>
        <service v-else></service>
      </view>
    </view>
    <view class="footer">
      <view class="recall">撤回</view>
    </view>
  </view>
</template>

<script setup>
import faultMessage from './components/faultMessage.vue';
import auditCheck from './components/auditCheck.vue';
import service from './components/service.vue';
import { ref } from 'vue';
const leftClick = () => {
  uni.navigateBack();
};
const tabs = ref([
  {
    //标签显示文本（String）
    name: '故障信息'
  },
  {
    name: '审核信息'
  },
  {
    name: '处理进度'
  },
  {
    name: '维修信息'
  },
  {
    name: '备件信息'
  }
]);

const checkIndex = ref(0);
const change = (e) => {
  console.log(e);
  checkIndex.value = e.index;
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .nav {
    background-color: #fff;
    padding: 20rpx;
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #0052d9;
  }
}
</style>
